﻿


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>密码工具</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiAdmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiAdmin/style/admin.css" media="all">
    <style>
        ::-webkit-scrollbar {
            width: 12px !important;
            border-radius: 0px;
        }

        .layui-form-radio {
            display: block;
        }
    </style>
</head>
<body>

    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">密码工具</div>
                    <div class="layui-card-body" pad15>
                        <blockquote class="layui-elem-quote">
                            各种各样的加解密，持续增加中。。。
                        </blockquote>
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <div class="layui-tab layui-tab-brief">
                                    <ul class="layui-tab-title">
                                        <li class="layui-this">加密/解密</li>
                                        <li>散列/哈希</li>
                                        <li>国密SM2</li>
                                        <li>国密SM4</li>
                                    </ul>
                                    <div class="layui-tab-content">
                                        <div class="layui-tab-item layui-show">
                                            <div class="layui-row">
                                                <div class="layui-col-xs5">
                                                    明文:
                                                    <textarea id="cPlainText" placeholder="明文" class="layui-textarea" rows="25" style="overflow-x: hidden; white-space: pre-wrap; margin-top: 5px"></textarea>
                                                </div>
                                                <div class="layui-col-xs2" style="display: flex; flex-direction:column;justify-content:center;align-items:center">
                                                    <h2>加密算法</h2>
                                                    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" style="margin-top:20px" id="generate">随机生成秘钥</button>
                                                    <div class="layui-form">
                                                        <input type="radio" name="AAA" value="AES" title="AES" checked lay-filter="pwd-radio-filter">
                                                        <input type="radio" name="AAA" value="RSA" title="RSA" lay-filter="pwd-radio-filter">
                                                        <div id="pwd1">
                                                            密钥：
                                                            <textarea name="" rows="5" class="layui-textarea" id="aeskey"></textarea>
                                                        </div>
                                                        <div id="pwd2" style="display:none;">
                                                            公钥：
                                                            <textarea name="" rows="5" class="layui-textarea" id="rsakey1"></textarea>
                                                            私钥：
                                                            <textarea name="" rows="5" class="layui-textarea" id="rsakey2"></textarea>
                                                        </div>
                                                    </div>
                                                    <br />
                                                    <button type="button" id="jiami" class="layui-btn layui-btn-sm">加密<i class="layui-icon layui-icon-right"></i></button>
                                                    <br />
                                                    <button type="button" id="jiemi" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-left"></i>解密</button>
                                                </div>
                                                <div class="layui-col-xs5">
                                                    密文:
                                                    <textarea id="cCipherText" placeholder="密文" class="layui-textarea" rows="25" style="overflow-x: hidden; white-space: pre-wrap; margin-top: 5px"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-tab-item menu2">
                                            明文:
                                            <textarea id="cPlainText2" placeholder="明文" class="layui-textarea" rows="10" style="overflow-x: hidden; white-space: pre-wrap;"></textarea>
                                            散列/哈希算法：
                                            <div class="layui-btn-container">
                                                <button class="layui-btn layui-btn-primary" data-type="SHA1">SHA1</button>
                                                <button class="layui-btn layui-btn-primary" data-type="SHA256">SHA256</button>
                                                <button class="layui-btn layui-btn-primary" data-type="SHA512">SHA512</button>
                                                <button class="layui-btn layui-btn-primary" data-type="MD5">MD5</button>
                                            </div>
                                            <div class="layui-btn-container">
                                                <button class="layui-btn layui-btn-primary" data-type="HmacSHA256">HmacSHA256</button>
                                                <button class="layui-btn layui-btn-primary" data-type="HmacMD5">HmacMD5</button>
                                                <input type="text" placeholder="请输入Hmac秘钥" autocomplete="off" class="layui-input" style="width: 500px; display: inline; margin-bottom: 10px; vertical-align: middle; " id="hmackey">
                                            </div>
                                            哈希值：
                                            <textarea id="cCipherText2" placeholder="密文" class="layui-textarea" rows="8" style="overflow-x: hidden; white-space: pre-wrap;"></textarea>
                                        </div>
                                        <div class="layui-tab-item">
                                            <div class="layui-row">
                                                <div class="layui-col-xs5">
                                                    明文:
                                                    <textarea id="cPlainText3" placeholder="明文" class="layui-textarea" rows="25" style="overflow-x: hidden; white-space: pre-wrap; margin-top: 5px"></textarea>
                                                </div>
                                                <div class="layui-col-xs2" style="display: flex; flex-direction:column;justify-content:center;align-items:center">
                                                    <h2>SM2算法</h2>
                                                    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" style="margin-top:20px" id="generate3">随机生成秘钥</button>
                                                    <div class="layui-form">
                                                        公钥：
                                                        <textarea name="" rows="6" class="layui-textarea" id="sm2key1"></textarea>
                                                        私钥：
                                                        <textarea name="" rows="6" class="layui-textarea" id="sm2key2"></textarea>
                                                    </div>
                                                    <br />
                                                    <button type="button" id="jiami3" class="layui-btn layui-btn-sm">加密<i class="layui-icon layui-icon-right"></i></button>
                                                    <br />
                                                    <button type="button" id="jiemi3" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-left"></i>解密</button>
                                                </div>
                                                <div class="layui-col-xs5">
                                                    密文:
                                                    <textarea id="cCipherText3" placeholder="HexString密文" class="layui-textarea" rows="25" style="overflow-x: hidden; white-space: pre-wrap; margin-top: 5px"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-tab-item">
                                            <div class="layui-row">
                                                <div class="layui-col-xs5">
                                                    明文:
                                                    <textarea id="cPlainText4" placeholder="明文" class="layui-textarea" rows="25" style="overflow-x: hidden; white-space: pre-wrap; margin-top: 5px"></textarea>
                                                </div>
                                                <div class="layui-col-xs2" style="display: flex; flex-direction:column;justify-content:center;align-items:center">
                                                    <h2>SM4算法</h2>
                                                    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" style="margin-top:20px" id="generate4">随机生成秘钥</button>
                                                    <div class="layui-form">
                                                        <input type="radio" name="ccc" value="ECB" title="ECB" checked lay-filter="pwd-radio-filter">
                                                        <input type="radio" name="ccc" value="CBC" title="CBC" lay-filter="pwd-radio-filter">
                                                        秘钥：
                                                        <textarea rows="5" class="layui-textarea" id="sm4key" placeholder="HexString秘钥key"></textarea>
                                                        <textarea rows="5" class="layui-textarea" id="sm4iv" style="display:none" placeholder="HexString向量IV"></textarea>
                                                    </div>
                                                    <br />
                                                    <button type="button" id="jiami4" class="layui-btn layui-btn-sm">加密<i class="layui-icon layui-icon-right"></i></button>
                                                    <br />
                                                    <button type="button" id="jiemi4" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-left"></i>解密</button>
                                                </div>
                                                <div class="layui-col-xs5">
                                                    密文:
                                                    <textarea id="cCipherText4" placeholder="HexString密文" class="layui-textarea" rows="25" style="overflow-x: hidden; white-space: pre-wrap; margin-top: 5px"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../../layuiAdmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: '../../layuiAdmin/', //静态资源所在路径
            version: top.layui.setter.version
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index'], function () {
            var $ = layui.$,
                admin = layui.admin,
                form = layui.form

            // radio 事件
            form.on('radio(pwd-radio-filter)', function (data) {
                var elem = data.elem; // 获得 radio 原始 DOM 对象
                var value = elem.value; // 获得 radio 值
                if (value == "AES") {
                    $("#pwd1").show();
                    $("#pwd2").hide();
                } else if (value == "RSA") {
                    $("#pwd1").hide();
                    $("#pwd2").show();
                } else if (value == "ECB") {
                    $("#sm4iv").hide();
                } else if (value == "CBC") {
                    $("#sm4iv").show();
                }
            });

            $("#generate").click(function () {
                var type = $("input[name=AAA]:checked").val();
                admin.req({
                    type: 'GET',
                    url: '/api/PwdTool/Generate?type=' + type,
                    success: function (res) {
                        if (type == "AES") {
                            $("#aeskey").val(res.data);
                        } else if (type == "RSA") {
                            $("#rsakey1").val(res.data.cPublicKey);
                            $("#rsakey2").val(res.data.cPrivateKey);
                        }
                    }
                })
            });
            $("#jiami").click(function () {
                var type = $("input[name=AAA]:checked").val();
                let cPlainText = $("#cPlainText").val();
                if (cPlainText == "") return layer.msg('请输入明文内容!', { icon: 2, time: 1000 });
                admin.req({
                    type: 'POST',
                    url: '/api/PwdTool/Encrypt?type=' + type,
                    data: {
                        plainText: cPlainText,
                        key: $("#aeskey").val(),
                        publicKey: $("#rsakey1").val(),
                    },
                    success: function (res) {
                        $("#cCipherText").val(res.data);
                    }
                })
            });
            $("#jiemi").click(function () {
                var type = $("input[name=AAA]:checked").val();
                let cCipherText = $("#cCipherText").val();
                if (cCipherText == "") return;
                admin.req({
                    type: 'POST',
                    url: '/api/PwdTool/Decrypt?type=' + type,
                    data: {
                        cipherText: cCipherText,
                        key: $("#aeskey").val(),
                        privateKey: $("#rsakey2").val(),
                    },
                    success: function (res) {
                        $("#cPlainText").val(res.data);
                    }
                })
            });

            $(".menu2>.layui-btn-container>button").click(function () {
                let type = this.dataset.type;
                let cPlainText2 = $("#cPlainText2").val();
                let hmackey = $("#hmackey").val();
                if (cPlainText2 == "") return layer.msg('请输入明文内容!', { icon: 2, time: 1000 });
                if (type.startsWith("Hmac") && hmackey == "") {
                    return layer.msg('请输入Hmac秘钥!', { icon: 2, time: 1000 });
                }
                admin.req({
                    type: 'POST',
                    url: '/api/PwdTool/Encrypt2?type=' + type,
                    data: {
                        plainText: cPlainText2,
                        hmackey: hmackey,
                    },
                    success: function (res) {
                        $("#cCipherText2").val(res.data);
                    }
                })
            });

            $("#generate3").click(function () {
                admin.req({
                    type: 'GET',
                    url: '/api/PwdTool/Generate?type=SM2',
                    success: function (res) {
                        $("#sm2key1").val(res.data.cPublicKey);
                        $("#sm2key2").val(res.data.cPrivateKey);
                    }
                })
            })

            $("#jiami3").click(function () {
                let cPlainText = $("#cPlainText3").val();
                if (cPlainText == "") return layer.msg('请输入明文内容!', { icon: 2, time: 1000 });
                admin.req({
                    type: 'POST',
                    url: '/api/PwdTool/SM2Encrypt',
                    data: {
                        plainText: cPlainText,
                        publicKey: $("#sm2key1").val(),
                    },
                    success: function (res) {
                        $("#cCipherText3").val(res.data);
                    }
                })
            });
            $("#jiemi3").click(function () {
                let cCipherText = $("#cCipherText3").val();
                if (cCipherText == "") return;
                admin.req({
                    type: 'POST',
                    url: '/api/PwdTool/SM2Decrypt',
                    data: {
                        cipherText: cCipherText,
                        privateKey: $("#sm2key2").val(),
                    },
                    success: function (res) {
                        $("#cPlainText3").val(res.data);
                    }
                })
            });

            $("#generate4").click(function () {
                admin.req({
                    type: 'GET',
                    url: '/api/PwdTool/Generate?type=SM4',
                    success: function (res) {
                        $("#sm4key").val(res.data.cPublicKey);
                        $("#sm4iv").val(res.data.cPrivateKey);
                    }
                })
            })

            $("#jiami4").click(function () {
                let cPlainText = $("#cPlainText4").val();
                if (cPlainText == "") return layer.msg('请输入明文内容!', { icon: 2, time: 1000 });
                admin.req({
                    type: 'POST',
                    url: '/api/PwdTool/SM4Encrypt',
                    data: {
                        plainText: cPlainText,
                        key: $("#sm4key").val(),
                        iv: $("#sm4iv").val(),
                        mode: $("input[name=ccc]:checked").val()
                    },
                    success: function (res) {
                        $("#cCipherText4").val(res.data);
                    }
                })
            });
            $("#jiemi4").click(function () {
                let cCipherText = $("#cCipherText4").val();
                if (cCipherText == "") return;
                admin.req({
                    type: 'POST',
                    url: '/api/PwdTool/SM4Decrypt',
                    data: {
                        cipherText: cCipherText,
                        key: $("#sm4key").val(),
                        iv: $("#sm4iv").val(),
                        mode: $("input[name=ccc]:checked").val()
                    },
                    success: function (res) {
                        $("#cPlainText4").val(res.data);
                    }
                })
            });
        });
    </script>
</body>
</html>
